/* Therapy Sound — Brand Kit v2 additions
   Flyer-style imports + Round Logo System + Facebook Cover + Instagram Overlay Kit */

/* ─────────────────────────────────────────────────────────────
   FLYER TEXTURE PRIMITIVES — drop on any element via class
   ───────────────────────────────────────────────────────────── */

/* Halftone dot overlay — the muddy poster fill */
.fx-halftone{position:relative;isolation:isolate}
.fx-halftone::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(circle, #000 1px, transparent 1.4px);
  background-size:4px 4px;
  mix-blend-mode:multiply;
  opacity:.55;
}
.fx-halftone.fx-coarse::before{background-size:6px 6px}
.fx-halftone.fx-fine::before{background-size:3px 3px;opacity:.35}
.fx-halftone > *{position:relative;z-index:2}

/* Paper fold/crease — the worn poster look */
.fx-fold{position:relative;isolation:isolate}
.fx-fold::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background-image:
    /* horizontal mid fold */
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(255,255,255,.05) calc(50% - 1px), rgba(0,0,0,.18) 50%, rgba(255,255,255,.04) calc(50% + 1px), transparent calc(50% + 1px)),
    /* vertical mid fold */
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.05) calc(50% - 1px), rgba(0,0,0,.18) 50%, rgba(255,255,255,.04) calc(50% + 1px), transparent calc(50% + 1px));
  mix-blend-mode:overlay;
}
.fx-fold.fx-fold-soft::after{opacity:.6}

/* Worn edges — vignette + scuffs */
.fx-worn{position:relative;isolation:isolate}
.fx-worn::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(0,0,0,.35), transparent 35%),
    radial-gradient(ellipse at 100% 100%, rgba(0,0,0,.4), transparent 35%),
    radial-gradient(ellipse at 100% 0%, rgba(0,0,0,.3), transparent 30%),
    radial-gradient(ellipse at 0% 100%, rgba(0,0,0,.3), transparent 30%);
  mix-blend-mode:multiply;
}

/* Diagonal duotone slash (flyer-style rust stripe) */
.fx-slash{position:relative}
.fx-slash::before{
  content:"";position:absolute;left:-10%;right:-10%;top:48%;height:14%;
  background:var(--rust-500);transform:rotate(-12deg);
  box-shadow:0 14px 0 var(--rust-700);opacity:.92;
}

/* ─────────────────────────────────────────────────────────────
   COVER + SECTION HEAD — flyer-style upgrades
   ───────────────────────────────────────────────────────────── */
.cover{background:var(--noir);color:var(--paper);margin:0 -40px 0 -40px;padding:80px 40px 96px;border-radius:0 0 28px 28px;position:relative;overflow:hidden}
.cover .h-display{color:var(--paper)}
.cover .cover-top{border-bottom-color:rgba(244,236,218,.18)}
.cover .cover-meta{border-top-color:rgba(244,236,218,.18)}
.cover .kicker{color:rgba(236,230,216,.7)}
.cover .small{color:rgba(236,230,216,.7)}
.cover::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 12% 18%, oklch(40% 0.10 198 / .45), transparent 40%),
    radial-gradient(circle at 88% 78%, oklch(40% 0.14 38 / .28), transparent 45%),
    radial-gradient(circle, #000 1px, transparent 1.4px);
  background-size:auto, auto, 6px 6px;
  mix-blend-mode:normal;
  opacity:.7;
}
.cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(255,255,255,.04) calc(50% - 1px), rgba(0,0,0,.22) 50%, rgba(255,255,255,.04) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.04) calc(50% - 1px), rgba(0,0,0,.22) 50%, rgba(255,255,255,.04) calc(50% + 1px), transparent calc(50% + 1px));
  mix-blend-mode:overlay;
}
.cover > *{position:relative;z-index:2}
.cover .kicker{color:rgba(236,230,216,.7)}
.cover .small{color:rgba(236,230,216,.7)}
.cover-stamp{position:absolute;right:40px;bottom:40px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;color:rgba(236,230,216,.6);text-transform:uppercase;max-width:46%}
.cover-stamp .hg-mark{font-family:var(--f-hand);font-size:26px;letter-spacing:0;color:var(--paper);line-height:.95;text-align:right;text-transform:none}
.cover-stamp .hg-mark span{display:block}

/* Eyebrow → number tag treatment like flyer mastheads */
.eyebrow-num{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-700);display:inline-flex;align-items:center;gap:10px}
.eyebrow-num b{font-family:var(--f-display);font-size:14px;letter-spacing:0;color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:3px 8px;border-radius:3px}

/* ─────────────────────────────────────────────────────────────
   ROUND LOGO SYSTEM
   ───────────────────────────────────────────────────────────── */
.round-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.round-cell{display:flex;flex-direction:column;gap:10px}
.round-stage{aspect-ratio:1/1;border:1px solid var(--rule-soft);border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:24px}
.round-stage.dark{background:var(--noir);border-color:var(--rule-dark-soft)}
.round-stage.paper{background:var(--paper-2)}
.round-stage.teal{background:var(--teal-500)}
.round-stage.rust{background:var(--rust-500)}
.round-stage.photo{background:
  radial-gradient(ellipse at 50% 30%, oklch(55% 0.12 200), transparent 50%),
  radial-gradient(ellipse at 80% 90%, oklch(30% 0.06 38), transparent 55%),
  linear-gradient(180deg, oklch(18% 0.02 200), oklch(8% 0.01 200));
}
.round-stage.photo::before{
  content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,0,0,.18) 8px 9px), radial-gradient(circle, #000 1px, transparent 1.4px);background-size:auto, 4px 4px;mix-blend-mode:multiply;opacity:.7;
}
.round-cell .label{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between;gap:8px}
.round-cell .label b{color:var(--ink);font-weight:500}

/* The round T mark — attached t-mark.png used as a mask so currentColor still controls the T color per variant */
.tcircle{
  --size: clamp(72px, 14vw, 132px);
  width:var(--size);height:var(--size);border-radius:50%;
  position:relative;display:grid;place-items:center;
  background:var(--teal-500);color:var(--paper);
  isolation:isolate;
}
.tcircle::before{
  content:"";position:absolute;inset:8%;
  background-color:currentColor;
  -webkit-mask:url('/static/icons/tb-t-mark.png') center/contain no-repeat;
          mask:url('/static/icons/tb-t-mark.png') center/contain no-repeat;
  z-index:2;
}

/* Variants */
.tcircle.v-solid-teal{background:var(--teal-500);color:var(--paper)}
.tcircle.v-solid-rust{background:var(--rust-500);color:#1a0f08}
.tcircle.v-solid-paper{background:var(--paper);color:var(--noir)}
.tcircle.v-solid-noir{background:var(--noir);color:var(--paper)}
.tcircle.v-outline{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 3px var(--paper)}
.tcircle.v-outline-ink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink)}
.tcircle.v-knockout{background:var(--paper);color:var(--noir)}
/* halftone fill */
.tcircle.v-halftone{background:var(--noir);color:var(--paper);overflow:hidden}
.tcircle.v-halftone .htf{position:absolute;inset:0;border-radius:50%;background-image:radial-gradient(circle, var(--teal-300) 1.2px, transparent 1.6px);background-size:5px 5px;opacity:.9;z-index:1}

/* split — half teal / half rust */
.tcircle.v-split{background:linear-gradient(90deg, var(--teal-500) 50%, var(--rust-500) 50%);color:var(--paper)}

/* stamp — distressed + ring */
.tcircle.v-stamp{background:transparent;color:var(--rust-700);box-shadow:inset 0 0 0 3px var(--rust-700);overflow:hidden}
.tcircle.v-stamp .scuff{position:absolute;inset:0;border-radius:50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");mix-blend-mode:lighten;opacity:.45;z-index:1}

/* mini ticks ring */
.tcircle.v-ticks{background:var(--noir);color:var(--paper)}
.tcircle.v-ticks .ring{position:absolute;inset:8%;border-radius:50%;background:
  conic-gradient(from 0deg, var(--paper) 0 1deg, transparent 1deg 30deg, var(--paper) 30deg 31deg, transparent 31deg 60deg, var(--paper) 60deg 61deg, transparent 61deg 90deg, var(--paper) 90deg 91deg, transparent 91deg 120deg, var(--paper) 120deg 121deg, transparent 121deg 150deg, var(--paper) 150deg 151deg, transparent 151deg 180deg, var(--paper) 180deg 181deg, transparent 181deg 210deg, var(--paper) 210deg 211deg, transparent 211deg 240deg, var(--paper) 240deg 241deg, transparent 241deg 270deg, var(--paper) 270deg 271deg, transparent 271deg 300deg, var(--paper) 300deg 301deg, transparent 301deg 330deg, var(--paper) 330deg 331deg, transparent 331deg 360deg);
  -webkit-mask:radial-gradient(circle, transparent 78%, #000 78%, #000 100%);
          mask:radial-gradient(circle, transparent 78%, #000 78%, #000 100%);
  z-index:1;
}

/* rules row */
.round-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
.round-rules .small{margin:6px 0 0}

@media (max-width:980px){.round-grid{grid-template-columns:repeat(2,1fr)}.round-rules{grid-template-columns:1fr}}

/* ─────────────────────────────────────────────────────────────
   FACEBOOK COVER (820 × 312 — shown at scale)
   ───────────────────────────────────────────────────────────── */
.fb-frame{background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;padding:18px;position:relative}
.fb-frame .label{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between;margin-bottom:12px}
.fb-cover{aspect-ratio:820/312;background:var(--noir);border-radius:6px;overflow:hidden;position:relative;color:var(--paper);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.fb-cover::before{
  content:"";position:absolute;inset:0;background-image:radial-gradient(circle, #000 1px, transparent 1.4px);background-size:6px 6px;mix-blend-mode:multiply;opacity:.55;z-index:1;
}
.fb-cover::after{
  content:"";position:absolute;inset:0;background-image:
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(255,255,255,.05) calc(50% - 1px), rgba(0,0,0,.22) 50%, rgba(255,255,255,.05) calc(50% + 1px), transparent calc(50% + 1px));
  mix-blend-mode:overlay;z-index:2;pointer-events:none;
}
.fb-cover > *{position:relative;z-index:3}
.fb-photo{position:absolute;inset:0;background:
  radial-gradient(ellipse at 60% 50%, oklch(50% 0.14 200), transparent 55%),
  radial-gradient(ellipse at 20% 80%, oklch(28% 0.05 200), transparent 60%),
  linear-gradient(180deg, oklch(22% 0.04 200), oklch(8% 0.02 200));
  z-index:0;
}
.fb-photo.warm{background:
  radial-gradient(ellipse at 65% 55%, oklch(55% 0.18 38), transparent 55%),
  radial-gradient(ellipse at 25% 85%, oklch(28% 0.05 38), transparent 60%),
  linear-gradient(180deg, oklch(22% 0.04 38), oklch(8% 0.02 38));
}
.fb-content{position:relative;z-index:4;display:grid;grid-template-columns:1.1fr 1fr;height:100%;padding:24px 28px;align-items:center}
.fb-left{display:flex;flex-direction:column;gap:8px}
.fb-eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-300)}
.fb-title{font-family:var(--f-display);font-size:clamp(28px,4.6vw,58px);line-height:.9;letter-spacing:-.01em;color:var(--paper)}
.fb-title .it{font-family:var(--f-serif);font-style:italic;color:var(--teal-300)}
.fb-title .rust{color:var(--rust-500)}
.fb-meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(236,230,216,.7);display:flex;gap:14px;margin-top:6px}
.fb-meta span{display:inline-flex;align-items:center;gap:6px}
.fb-meta i{display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--teal-500);font-style:normal}
.fb-right{position:relative;height:100%;display:flex;justify-content:flex-end;align-items:center}
.fb-tcircle{width:clamp(48px,8vw,96px);height:clamp(48px,8vw,96px);position:absolute;top:18px;right:24px}
.fb-stamp{position:absolute;right:24px;bottom:18px;text-align:right;font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(236,230,216,.7);line-height:1.4}
.fb-stamp .hand{font-family:var(--f-hand);font-size:18px;letter-spacing:0;color:var(--paper);text-transform:none;display:block}
.fb-rust-slash{position:absolute;left:-5%;right:-5%;top:62%;height:10%;background:var(--rust-500);transform:rotate(-9deg);opacity:.9;z-index:1;box-shadow:0 10px 0 var(--rust-700)}

.fb-variants{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media (max-width:780px){.fb-variants{grid-template-columns:1fr}}

.dl-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;background:var(--noir);color:var(--paper);padding:10px 14px;border-radius:99px;border:0;cursor:pointer;text-decoration:none;transition:transform .15s ease, background .15s ease}
.dl-btn:hover{background:var(--teal-700);transform:translateY(-1px)}
.dl-btn .arrow{display:inline-block;color:var(--teal-300)}
.dl-btn.teal{background:var(--teal-500);color:#fff}
.dl-btn.teal:hover{background:var(--teal-600)}
.dl-btn.teal .arrow{color:var(--paper)}

/* ─────────────────────────────────────────────────────────────
   INSTAGRAM OVERLAY KIT
   ───────────────────────────────────────────────────────────── */
.ig-overlays{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media (max-width:980px){.ig-overlays{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.ig-overlays{grid-template-columns:1fr}}

.overlay-card{display:flex;flex-direction:column;gap:10px}
.overlay-stage{aspect-ratio:1/1;border-radius:8px;overflow:hidden;position:relative;background:var(--noir)}
.overlay-photo{position:absolute;inset:0;z-index:0}
.overlay-photo.shot-1{background:
  radial-gradient(ellipse at 50% 45%, oklch(50% 0.10 200), transparent 55%),
  radial-gradient(ellipse at 30% 90%, oklch(22% 0.04 200), transparent 60%),
  linear-gradient(180deg, oklch(20% 0.03 200), oklch(8% 0.01 200));
}
.overlay-photo.shot-2{background:
  radial-gradient(ellipse at 60% 50%, oklch(55% 0.16 38), transparent 55%),
  radial-gradient(ellipse at 20% 80%, oklch(28% 0.05 38), transparent 60%),
  linear-gradient(180deg, oklch(20% 0.04 38), oklch(8% 0.02 38));
}
.overlay-photo.shot-3{background:
  radial-gradient(circle at 50% 30%, oklch(70% 0.18 200), transparent 25%),
  radial-gradient(circle at 30% 60%, oklch(60% 0.14 200), transparent 30%),
  radial-gradient(circle at 70% 70%, oklch(55% 0.14 38), transparent 30%),
  linear-gradient(180deg, oklch(15% 0.03 200), oklch(8% 0.02 200));
}
.overlay-photo::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,0,0,.18) 8px 9px), radial-gradient(circle, #000 1px, transparent 1.4px);
  background-size:auto, 4px 4px;
  mix-blend-mode:multiply;opacity:.6;
}

/* The downloadable overlays (rendered live with SVG so user sees what they get) */
.overlay-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

.overlay-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.overlay-name{font-family:var(--f-display);font-size:15px;color:var(--ink);letter-spacing:-.005em}
.overlay-name .sz{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:2px}

.sec.inset-dark .overlay-name{color:var(--paper)}
.sec.inset-dark .overlay-name .sz{color:rgba(236,230,216,.55)}

.ig-overlay-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule-dark-soft)}
.ig-overlay-notes .small{margin:6px 0 0}
@media (max-width:780px){.ig-overlay-notes{grid-template-columns:1fr}}

/* Section number markers in eyebrow */
.sec-num{display:inline-block;font-family:var(--f-display);font-size:11px;background:var(--ink);color:var(--paper);padding:3px 7px;border-radius:3px;letter-spacing:.04em;margin-right:8px;vertical-align:middle}
.sec.inset-dark .sec-num{background:var(--paper);color:var(--ink)}

/* Halftone applied to the existing photo tiles in feed (more poster-like) */
.tile-photo .ph-shot::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='2' cy='2' r='.8' fill='%23000' opacity='.45'/></svg>");
}

/* Diagonal stripes vocabulary — for use anywhere */
.fx-stripes-diag{position:absolute;inset:auto -5% 30% -5%;display:flex;flex-direction:column;gap:5px;pointer-events:none;z-index:1}
.fx-stripes-diag span{height:7px;background:var(--rust-500);transform:skewY(-10deg);transform-origin:left}
.fx-stripes-diag span:nth-child(2){background:var(--teal-300);width:80%}
.fx-stripes-diag span:nth-child(3){background:var(--rust-500);width:90%}
.fx-stripes-diag span:nth-child(4){background:var(--teal-700);width:70%}